<template>
	<div class="editor-panel" id="editor-panel" @click="handleClickCanvas">
		<div class="editor-pane-inner" id="editor-pane-inner" ref="editorPaneInner">
			<div class="editor-bottom" :style="editPanelStyle"></div>
			<div class="editor-main" ref="canvas-panel" id="canvas-panel" :style="editPanelStyle">
				<div class="page-preview-wrapper" :style="getCommonStyle(getcurrSceneCommonStyle)" style="background-size: 100% 100%!important;" id="canvas-panel-inner">
					<resize-widget v-for="item in elems" :key="item.uuid" :uuid="item.uuid" :defaultStyle="item.commonStyle" :style="getCommonStyle(item.commonStyle)" :active="item.uuid === currElementUUID" :locked="item.locked" :wrapId="'canvas-panel-inner'" :scale="scaleSize" @on-element-click="handleElementClick(item.uuid)" @on-resize="handleElementResize" v-if="item.elName !== 'sxc-audio'">
						<component class="components-item" :is="item.elName" :commonStyleColor="item.commonStyle.color" v-bind="{ ...item.propsValue, value: item.value }" @update:value="handleValueChange" />
					</resize-widget>
				</div>
			</div>
		</div>
		<context-menu v-if="contextMenuTarget !== null" :target="contextMenuTarget" :show="showContextMenu" @update:show="beforeContextMenuShow" :pageHeight="pageData.height" :pageScale="scaleSize">
			<quick-tool @selected="showContextMenu = false" v-bind="{ ...orgData }" />
		</context-menu>
	</div>
</template>

<script>
	import { mapState, mapGetters, mapMutations, mapActions } from 'vuex';
	import { registerComponents } from '@/plugins/index';
	import { getCommonStyle } from '@/utils';
	export default {
		components: {
			...registerComponents,
			'resize-widget': () =>
				import('@/components/resize-widget'),
			'elem-shortcut-tool': () =>
				import('@/components/program-editor/elem-shortcut-tool'),
			'context-menu': () =>
				import('@/components/context-menu'),
			'quick-tool': () =>
				import('@/components/program-editor/quick-tool')
		},
		props: {
			scale: {
				type: Number,
				default: 0
			}
		},
		data() {
			return {
				currPosi: { // 当前元素的top与left
					top: '',
					left: ''
				},
				elems: [],
				contextMenuTarget: null,
				showContextMenu: false,
				scaleSize: 0,
				topLen: 0,
				leftLen: 0,
				screenWidth: document.body.clientWidth
			};
		},
		computed: {
			...mapState('programs', ['pageData', 'currElementUUID', 'currSceneUUID', 'fullBeforeElement', 'currAttrPannelIndex']),
			...mapGetters('programs', ['currScene', 'currElement']),
			orgData() {
				let orgCurrElementData = {};
				if(this.currElement) {
					let {
						fullBeforeElement,
						currElement
					} = this;
					return {
						orgCurrElementData: fullBeforeElement[currElement.uuid],
						nowUUID: currElement.uuid
					};
				} else {
					return {};
				}
			},
			editPanelStyle() {
				const {
					scale,
					pageData,
					currScene,
					scaleSize
				} = this;
				if(!currScene) {
					return {};
				}
				// console.log(pageData)
				this.changePosFn()
				//this.handleElementResize('aaa')
				return {
					transform: 'scale(' + this.scaleSize + ')',
					width: pageData.width + 'px',
					height: pageData.height + 'px',
					backgroundColor: currScene.commonStyle && currScene.commonStyle.backgroundColor ? currScene.commonStyle.backgroundColor : '#ffffff',
					top: this.topLen + 'px',
					left: this.topLeft + 'px'
				};
			},
			getcurrSceneCommonStyle() {
				const {
					scale,
					pageData,
					currScene
				} = this;
				if(!currScene) {
					return '';
				}
				return { ...currScene.commonStyle, ...{
						width: pageData.width,
						height: pageData.height
					}
				};
			}
		},
		watch: {
			screenWidth(newVal, oldVal) {},
			pageData: {
				handler(v1, v2) {
					this.$nextTick(() => {
						this.contextMenuTarget = document.getElementById('canvas-panel');
						if(this.pageData.width > this.pageData.height) {
							this.scaleSize = this.$refs.editorPaneInner.offsetWidth / this.pageData.width;
						} else {
							this.scaleSize = this.$refs.editorPaneInner.offsetHeight / this.pageData.height;
						}
						if(this.scaleSize <= 0) {
							this.scaleSize = 0.02;
						}
						this.topLen = this.$refs.editorPaneInner.offsetHeight / 2 - (this.scaleSize * document.getElementById('canvas-panel').offsetHeight) / 2;
						this.topLeft = this.$refs.editorPaneInner.offsetWidth / 2 - (this.scaleSize * document.getElementById('canvas-panel').offsetWidth - 40) / 2;
						if(this.topLen < 0) {
							this.topLen = 0;
						}
						if(this.topLeft < 0) {
							this.topLeft = 0;
						}
					});
				},
				deep: true,
				immediate: true
			},
			currScene: {
				deep: true,
				immediate: true,
				handler(v1, v2) {
					if(v1 && v1.elements) {
						let list = [];
						v1.elements.forEach(item => {
							if(item.elName === 'sxc-live') {
								if(item.propsValue.liveSrcList[0]) {
									if(item.propsValue.liveSrcList[0].length > 0) {
										list.push(item);
									}
								}
							} else {
								list.push(item);
							}
						});
//						console.log(list)
						this.elems = [...list];
					} else {
						this.elems = [];
					}
				}
			},
			scale(v1, v2) {
				if(v1 > v2) {
					this.scaleSize = this.scaleSize + v2;
				}
				if(v1 < v2) {
					this.scaleSize = this.scaleSize - v1;
				}
				this.$nextTick(() => {
					this.topLen = this.$refs.editorPaneInner.offsetHeight / 2 - (this.scaleSize * document.getElementById('canvas-panel').offsetHeight) / 2;
					this.topLeft = this.$refs.editorPaneInner.offsetWidth / 2 - (this.scaleSize * document.getElementById('canvas-panel').offsetWidth - 40) / 2;
					if(this.topLen < 0) {
						this.topLen = 0;
					}
					if(this.topLeft < 0) {
						this.topLeft = 0;
					}

					if(this.scaleSize < 0) {
						this.scaleSize = 0.05;
					}
				});
			}
		},
		mounted() {
			let that = this;
			window.onresize = () => {
				that.screenWidth = document.body.clientWidth;
			};
		},
		destroyed() {
			this.setScaleValue(0.5);
		},
		methods: {
			getCommonStyle,
			...mapMutations('programs', ['updateElementStyle', 'setCurrElementUUID', 'updateElementValue', 'setFullBeforeElement', 'setCurrAttrPannelIndex', 'setScaleValue']),
			...mapActions('programs', ['postScreenShots', 'getSceneCover']),
			handleElementResize(pos) {
				 console.log(pos)

				this.updateElementStyle(pos);
				if(this.currElement.commonStyle.width !== this.pageData.width || this.currElement.commonStyle.height !== this.pageData.height) {
					this.setFullBeforeElement({
						uuid: this.currElement.uuid,
						pos: this.currElement.commonStyle
					});
				}
				this.changePosFn();
			},
			changePosFn() {
//				let aaa = '',
//					bbb = '',
//					ccc = '';
//
//
//				for(let i = 0, elemsLen = this.elems.length; i < elemsLen; i++) {
//					if(this.currElement.uuid !== this.elems[i].uuid) {
//						aaa = (this.elems[i].commonStyle.left + this.elems[i].commonStyle.width).toFixed(); // 右
//						bbb = (this.elems[i].commonStyle.top + this.elems[i].commonStyle.height).toFixed(); // 下
//						ccc = this.currElement.commonStyle.left
//
//						if(this.currElement.commonStyle.left - aaa < 50) {
//							if(this.currElement.commonStyle.left > this.elems[i].commonStyle.left) {
//
//							}
//						}
//					}
//				}
			},
			handleElementClick(uuid) { console.log(3333)
				this.setCurrElementUUID(uuid);
				if(this.currElement.commonStyle.width !== this.pageData.width || this.currElement.commonStyle.height !== this.pageData.height) {
					this.setFullBeforeElement({
						uuid: uuid,
						pos: this.currElement.commonStyle
					});
				}
				this.setCurrAttrPannelIndex('0');
			},
			handleClickCanvas(e) {
				if(!e.target.classList.contains('elem-on-edit-panel') && !e.target.classList.contains('iconfont')) {
					this.setCurrElementUUID('');
				}
				this.setCurrAttrPannelIndex('0');
			},
			handleValueChange(e) {
				this.updateElementValue(e);
			},
			beforeContextMenuShow(show) {
				if(this.currElementUUID) {
					this.showContextMenu = show;
				}
			},
			/*
			获取尺寸变化设置缩放比例
			*/
			setupCommonStyle() {

			}
		}
	};
</script>

<style lang="scss" scoped>
	.editor-panel {
		position: absolute;
		width: 100%;
		height: 100%;
		border: 1px solid #f5f5f5;
		border-width: 0 1px;
		background-image: linear-gradient(45deg, #f5f5f5 25%, transparent 0, transparent 75%, #f5f5f5 0), linear-gradient(45deg, #f5f5f5 25%, transparent 0, transparent 75%, #f5f5f5 0);
		background-position: 0 0, 13px 13px;
		background-size: 26px 26px;
		display: flex;
		justify-content: flex-start;
	}

	.editor-pane-inner {
		height: 100%;
		width: calc(100% - 40px);
		padding: 20px;
		box-sizing: border-box;
	}

	.editor-bottom {
		margin: auto;
		position: absolute;
		transform-origin: 0% 0%;
		background-image: url('../../assets/img/bg_transparent_16.png');
		background-repeat: repeat;
	}

	.editor-main {
		margin: auto;
		position: absolute;
		background: #ffffff;
		transform-origin: 0% 0%;
		border-radius: 3px;
		box-shadow: 4px 4px 16px 0 rgba(0, 0, 0, 0.44);
		.elem-on-edit-panel {
			height: 100%;
			width: 100%;
			overflow: hidden;
		}
	}

	.page-preview-wrapper {
		height: 100%;
		position: relative;
		background-size: 100% 100% !important;
	}

	.components-item {
		width: 100%;
		height: 100%;
		overflow: hidden;
		position: relative;
	}
</style>
